<style lang="scss" scoped>
  @import '../../styles/common/loading.less';
  .container{
    border: none !important;
    margin-top: 4px;
  }
  .el-col-offset-1 {
    margin-left: 0%;
  }
  .button_a {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);

  }
  .col_a {
    margin-left: 2%;
  }
  .el-card {
    height: 200px;
  }

  .el-button--primary {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);
  }
</style>
<template>
    <div>
        <div class="container">
            <el-form :model="formInline" class="select-submit-form">
                <el-row type="flex">
                    <el-col :span="8">
                        <el-form-item label="结算单号">
                            <el-input v-model="formInline.settleNo" ></el-input>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label="医疗机构名称">
                            <!-- <el-select  v-model="formInline.hospCode" placeholder="" >
                                <el-option v-for="item in hospitalList" :key="item.hospitalCode" :label="item.hospitalName" :value="item.hospitalCode"> </el-option>
                            </el-select> -->
                            <el-input  style="margin-top: 5px" v-model="formInline.hospitalName" placeholder="" disabled>
                                <el-button slot="append" @click="hospitalDialogVisible = true" icon="el-icon-search"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="任务状态">
                            <el-select v-model="formInline.taskState" >
                                <el-option v-for="item in taskStateList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>    
                <el-row>
                  <el-col :span="24">
                    <div class="select-btn-group">
                      <el-button type="primary" size="medium"  @click="handleSearch">查询</el-button>
                      <el-button type="primary" size="medium" @click="handleReset">重置</el-button>
                    </div>
                  </el-col>
                </el-row>
            </el-form>
            <el-table
                :data="tableData"
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                style="margin: 30px 0;border: 1px solid #d6d9d8;"
                v-loading="loading"
                element-loading-text="Loading....."
            >
                <el-table-column fixed type="index" width="55"> </el-table-column>
                <el-table-column prop="settleNo" label="结算单号" width="165" align="center">
                    <template  slot-scope="scope">
                        <router-link 
                        :to="{
                            name: 'settlementTaskListDetail', 
                            params: { 
                                taskId: scope.row.taskId,
                                settleNo: scope.row.settleNo,
                                taskState: scope.row.taskState,
                            }
                        }">
                            <a href="#" style="color: #409EFF" >{{scope.row.settleNo}}</a>
                            <!-- <a href="#" style="color: #ff8a00" >{{scope.row.businessNo}}</a> -->
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="settleNum" label="结算笔数" align="center"></el-table-column>
                <el-table-column prop="taskState" label="任务状态"  :formatter="formatSpecTaskState" align="center"></el-table-column>
                <el-table-column prop="medicalFeeAmount" label="医疗费用总额" align="center"></el-table-column>
                <el-table-column prop="actualPaymentAmount" label="实际支付金额" align="center"></el-table-column>
                <el-table-column prop="flowInTime" label="创建时间" align="center"></el-table-column>
                <el-table-column prop="flowOutTime" label="完成时间" align="center"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <div v-show="pagination.totalPage>0" class="index_page">
                    <el-pagination :current-page="pagination.currentPage" :page-size="pagination.rowsNumber"
                                    :page-sizes="[10, 25, 50, 100]"
                                    :total="pagination.totalPage" background layout="prev, pager, next,sizes,total,jumper"
                                    @size-change="handleSizeChange" @current-change="queryFun">
                    </el-pagination>
                </div>
            </div>
            <!-- 医疗机构选择弹框 -->
            <el-dialog
                title="医疗机构信息"
                :visible.sync="hospitalDialogVisible"
                width="60%"
                center>
                <template>
                    <div class="container">
                        <el-form :model="prpLHospCompany" ref="prpLHospCompany">
                            <el-row type="flex">
                                <el-col :span="12">
                                    <el-form-item label="医疗机构名称" prop="hospName">
                                        <el-input placeholder="" v-model="prpLHospCompany.hospName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="医疗机构编码" prop="hospCode">
                                        <el-input placeholder=""  v-model="prpLHospCompany.hospCode"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                            <el-col :span="24">
                                <div class="select-btn-group">
                                    <el-button type="primary" size="medium"  @click="queryHospList">查询</el-button>
                                    <el-button type="primary" size="medium" @click="resetForm('prplPayeeList')">重置</el-button>
                                </div>
                            </el-col>
                            </el-row>
                        </el-form>
                        <el-table
                        :data="hospitalList"
                        class="table"
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                        style="margin-top: 10px"
                        >
                            <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                            <el-table-column prop="hospName" label="医疗机构名称" align="center">
                                <template  slot-scope="scope">
                                    <a href="#" style="color: #409EFF" @click="choseHosp(scope.row)">{{scope.row.hospName}}</a>
                                </template> 
                            </el-table-column>
                            <el-table-column prop="hospCode" label="医疗机构编码" align="center">
                                <template  slot-scope="scope">
                                    <a href="#" style="color: #409EFF" @click="choseHosp(scope.row)">{{scope.row.hospCode}}</a>
                                </template>     
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination :current-page="hosppagination.currentPage" :page-size="hosppagination.rowsNumber"
                                            :total="hosppagination.totalPage" background layout="prev, pager, next,total,jumper"
                                            @current-change="hospQueryFun">
                            </el-pagination>
                        </div>
                    </div>
                </template>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="hospitalDialogVisible = false">关闭</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import util from '@/libs/util';
import{queryProcessEngineList, queryHospCompanyList}from '@/api/baseDate';
import Cookies from 'js-cookie';
export default {
    name: 'settlementTaskList',
    data() {
        return {
            loading: false,
            pagination: {
                currentPage: 1, // 当前页
                rowsNumber: 10, // 每页条数
                totalPage: 0 // 总条数
            },
            hospitalDialogVisible: false,
            prpLHospCompany: {}, // 医疗机构对象
            hospitalList:[], // 医疗机构列表
            hosppagination:{
                currentPage: 1, // 当前页
                rowsNumber: 5, // 每页条数
                totalPage: 0 // 总条数
            },
            taskStateList:[
                {
                    code:'09',
                    name:'请选择'
                },
                {
                    code:'03',
                    name:'已提交'
                },
                {
                    code:'05',
                    name:'已退回'
                },
            ],
            formInline: {
                hospCode:'',
                taskState:'',
                hospCode:'',
                hospitalName:'',
            },
            tableData:[],
        };
    },
    created() {
        this.querySettleTaskList();
    },
    methods: {
         handleSizeChange(pageSize){ // 改变当前页条数事件
            this.pagination.rowsNumber=pageSize
            this.querySettleTaskList();
        },
        queryFun(pageNum){ // 改变当前页事件
            this.pagination.currentPage = pageNum;
            this.querySettleTaskList();
        },
        querySettleTaskList(){
            let param = {
                ...this.formInline,
                taskType:'settle',
                pageNum: this.pagination.currentPage,
                pageSize: this.pagination.rowsNumber,
                handleComrCode : Cookies.get("makeCom"),
                handlerCode : Cookies.get("userCode"),
            }
            // 禁止重复点击
            if(this.loading){
                return;
            }
            this.loading = true;
            queryProcessEngineList(param).then((res)=> this.handleTaskListResponse(res));
        },
        handleTaskListResponse(res){
            this.loading = false;
            if(res){
                this.tableData = res.data.list;
                this.pagination.totalPage = res.data.total;
            }
        },
        // 触发搜索按钮
        handleSearch() {
            this.querySettleTaskList();
        },
        // 查询医疗机构
        queryHospList(){
            let param = {
                ...this.prpLHospCompany,
                pageNum: this.hosppagination.currentPage,
                pageSize: this.hosppagination.rowsNumber
            }
            queryHospCompanyList(param)
                .then(res => {
                    this.hospitalList = res.data.list;
                    this.hosppagination.totalPage = res.data.total;
                })
        },
        // 改变医疗机构
        hospQueryFun(pageNum){ 
            this.hosppagination.currentPage = pageNum;
            this.queryHospList();
        },
        // 选择医疗机构
        choseHosp(row){
            this.formInline.hospCode = row.hospCode;
            this.formInline.hospitalName = row.hospName;
            this.hospitalDialogVisible = false;
        },
        handleReset(){
            
        }
    },

};
</script>